import React, { Component } from 'react';
import styled from 'styled-components/native';
import Touchable from '@appandflow/touchable';

import { colors } from '../../utils/constants';

const Theme = {
  textColor: colors.PRIMARY_TEXT,
  disabled: {
    textColor: colors.PRIMARY_TEXT_LITE
  }
};

const Root = styled(Touchable).attrs({
  feedback: 'opacity'
})`
  paddingTop: 5;
  paddingBottom: 5;
  paddingLeft: 10;
  paddingRight: 10;
`;

const Text = styled.Text`
  color: ${props => props.disabled ? Theme.disabled.textColor : Theme.textColor};
  fontSize: 16;
`;

class TextButton extends Component {
  render() {

    const { text, onPressed, disabled, children } = this.props;

    return (
      <Root onPress={onPressed ? () => onPressed() : () => null} disabled={disabled === true}>
        {
          children || <Text disabled={disabled === true}>{text}</Text>
        }
      </Root>
    );
  }
}

export default TextButton;
